<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram 4.7.1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Helper function to draw a resistor box on a line segment
        function drawResistor(ctx, midX, midY, angle, resLen = 40, resWid = 16) {
            ctx.save();
            ctx.translate(midX, midY);
            ctx.rotate(angle);
            // Clear the area where the resistor will be drawn to remove the underlying line
            ctx.clearRect(-resLen / 2 - 1, -resWid / 2 - 1, resLen + 2, resWid + 2);
            // Draw the resistor rectangle
            ctx.beginPath();
            ctx.rect(-resLen / 2, -resWid / 2, resLen, resWid);
            ctx.stroke();
            ctx.restore();
        }

        // Helper function to get midpoint and angle between two points
        function getMidpointAngle(p1, p2) {
            const midX = (p1.x + p2.x) / 2;
            const midY = (p1.y + p2.y) / 2;
            const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
            return { midX, midY, angle };
        }

        // Define coordinates for the nodes and terminals
        const n1 = { x: 180, y: 200 }; // Junction of a, e, f
        const n2 = { x: 320, y: 200 }; // Junction of b, d, f
        const n3 = { x: 250, y: 300 }; // Junction of c, d, e

        const term_x_start = { x: 100, y: 150 };
        const term_y_start = { x: 400, y: 150 };
        const term_z_start = { x: 250, y: 370 };

        // Draw all the connecting lines first
        ctx.beginPath();
        // Line for resistor a
        ctx.moveTo(term_x_start.x, term_x_start.y);
        ctx.lineTo(n1.x, n1.y);
        // Line for resistor b
        ctx.moveTo(term_y_start.x, term_y_start.y);
        ctx.lineTo(n2.x, n2.y);
        // Line for resistor c
        ctx.moveTo(term_z_start.x, term_z_start.y);
        ctx.lineTo(n3.x, n3.y);
        // Line for resistor f
        ctx.moveTo(n1.x, n1.y);
        ctx.lineTo(n2.x, n2.y);
        // Line for resistor e
        ctx.moveTo(n1.x, n1.y);
        ctx.lineTo(n3.x, n3.y);
        // Line for resistor d
        ctx.moveTo(n2.x, n2.y);
        ctx.lineTo(n3.x, n3.y);
        ctx.stroke();

        // Draw the resistor boxes over the lines
        let res;
        // Resistor a
        res = getMidpointAngle(term_x_start, n1);
        drawResistor(ctx, res.midX, res.midY, res.angle);
        // Resistor b
        res = getMidpointAngle(term_y_start, n2);
        drawResistor(ctx, res.midX, res.midY, res.angle);
        // Resistor c
        res = getMidpointAngle(term_z_start, n3);
        drawResistor(ctx, res.midX, res.midY, res.angle);
        // Resistor d
        res = getMidpointAngle(n2, n3);
        drawResistor(ctx, res.midX, res.midY, res.angle);
        // Resistor e
        res = getMidpointAngle(n1, n3);
        drawResistor(ctx, res.midX, res.midY, res.angle);
        // Resistor f
        res = getMidpointAngle(n1, n2);
        drawResistor(ctx, res.midX, res.midY, res.angle, 50); // resistor f is a bit wider

        // Draw labels for terminals
        ctx.font = '24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('X', term_x_start.x - 20, term_x_start.y);
        ctx.fillText('Y', term_y_start.x + 20, term_y_start.y);
        ctx.fillText('Z', term_z_start.x, term_z_start.y + 20);

        // Draw labels for resistors
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('a', 145, 165);
        ctx.fillText('b', 355, 165);
        ctx.fillText('c', 270, 335);
        ctx.fillText('d', 300, 255);
        ctx.fillText('e', 200, 255);
        ctx.fillText('f', 250, 180);

        // Draw the caption
        ctx.font = '24px KaiTi'; // A common Chinese font
        ctx.fillText('电图 4.7.1', 250, 420);

    </script>
</body>
</html>